import { createApp, h, render, ref } from "vue";
import alert from "@/components/layer/alert.vue";
import confirm from "@/components/layer/confirm.vue";
import modal from "@/components/layer/modal.vue";
import { ElMessage, MessageParams, ElLoading } from "element-plus";

// const modulesFiles = require.context('@/components/layer', true, /\.vue$/);
// const modules = modulesFiles.keys().reduce((modules, modulePath) => {
//     // set './app.js' => 'app'
//     const moduleName = modulePath.replace(/^\.\/(.*)\.vue$/, '$1');
//     const value = modulesFiles(modulePath);
//     modules[moduleName] = value.default;
//     return modules;
// }, {});
const layer = function (app: any) {
    return {
        _create(component: any, props: any, children = {}) {
            const defPropsMap: any = {
                alert: {
                    title: "提示",
                    content: "",
                    width: 400
                },
                confirm: {
                    title: "提示",
                    content: "",
                    width: 500
                },
                modal: {
                    title: "提示",
                    content: "",
                    width: 500
                }
            };
            let Props = { ...defPropsMap[component.name], ...props };
            const layerDom = document.createElement('div');
            let close = () => {
                // console.log("remove dom");
                layerDom.remove();
            };
            let comRef = ref(null) as any;
            let vNode = h({
                render() {
                    return h(component, { ...Props, ref: comRef, "before-close": close }, children)
                }
            });
            let root = Props._top ? (top || self) : self;
            root.document.body.appendChild(layerDom);
            vNode.appContext = app._context;
            render(vNode, layerDom);
            return {
                el: layerDom,
                vm: comRef.value,
                close
            };
        },
        alert: function (option: any) {
            /**调用方式:   后两个参数参照渲染函数传参
                    this.$layer.alert("hello world",{title:"title reset"},this.$refs.slotRef.innerHTML);
                    this.$layer.alert("hello world",{title:"title reset"},"<div>内容</div>");
                    this.$layer.alert("hello world",{title:"title reset"},h("p","内容"));
                    this.$layer.alert("hello world",{title:"title reset"},()=>h(自定义组件,"内容"));
             */
            let opt = {};
            let children = {};
            if (typeof option === "string") {
                opt = Object.assign({}, { content: option, ...arguments[1] })
                children = arguments[2] || {};
            } else {
                opt = option;
                children = arguments[1] || {};
            }
            let layer = this._create(alert, opt || {}, children);
            return layer;
        },
        confirm: function (option: any) {
            /**
             * the same to alert
             */
            let opt = {};
            let children = {};
            if (typeof option === "string") {
                opt = Object.assign({}, { content: option, ...arguments[1] })
                children = arguments[2] || {};
            } else {
                opt = option;
                children = arguments[1] || {};
            }
            let layer = this._create(confirm, opt || {}, children);
            return layer;
        },
        modal: function (props = {}, children = {}) {
            let layer = this._create(modal, props, children);
            return layer;
        },
        message: function (message: string = "", type: Type = Type.success, option: Object = {}) {
            let opt: MessageParams = { message: message, type: "success", ...option };
            return ElMessage(opt);
        },
        loading: function () {
            return ElLoading.service({
                lock: true,
                text: '加载中...',
                background: 'rgba(0, 0, 0, 0.7)',
            });
        }
    };
}

export default {
    install(app: any, option = {}) {
        app.config.globalProperties.$layer = layer(app);
    }
};

declare module "@vue/runtime-core" {
    interface ComponentCustomProperties {
        $layer: {
            alert: Function,
            confirm: Function,
            modal: Function,
            loading: Function,
            message: Function
        },
        $preview:Function
    }
}

enum Type {
    success = "success",
    warning = "warning",
    error = "error",
    message = "message"
}